<script setup>
import userTitle from "@/components/userTitle.vue";
import axios from "axios";
import { ref, onMounted } from "vue";
const myLikeArr = ref([]);
onMounted(async () => {
  let userid = localStorage.getItem("userId");
  let { data } = await axios.get("http://localhost:3000/userLike");
  myLikeArr.value = data.filter((item) => item.userId == userid);
});

const goPage = (url) => {
  // console.log(url);
  window.open(url, "_blank");
};
</script>

<template>
  <div class="myLike">
    <userTitle>我的收藏</userTitle>
    <ul v-if="myLikeArr.length > 0">
      <li v-for="item in myLikeArr" :key="item.id">
        <img :src="item.img" alt="" />
        <div class="text">
          <span>{{ item.name }}</span>
          <p>{{ item.briefly }}</p>
        </div>
        <div class="icon" @click="goPage(item.url)">
          <i class="iconfont icon-yuanjiantou"></i>
        </div>
      </li>
    </ul>
    <div class="notLike" v-else></div>
  </div>
</template>

<style scoped lang="scss">
.myLike {
  width: 100%;
  max-height: 90%;
  height: 400px;
  // background-color: red;
  ul {
    padding: 10px;
    margin: 10px 0;
    width: 100%;
    // height: 80%;
    max-height: 80%;
    display: flex;
    flex-wrap: wrap;
    // background-color: pink;
    li {
      margin: 10px;
      padding: 5px 10px 5px 5px;
      width: 30%;
      height: 20%;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-radius: 3px;
      box-shadow: 2px 2px 4px #00000016;
      transition: all 0.3s ease;
      cursor: pointer;
      &:hover {
        transform: translateY(-7%);
        box-shadow: 2px 10px 20px #b895a785;
      }
      &:hover span,
      &:hover .iconfont {
        color: #b895a7;
      }

      .text {
        margin-left: 5px;
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // background-color: red;
        // background-color: saddlebrown;
        span {
          
          display: block;
          width: 90%;
          font-size: 17px;
        }
        p {
          font-size: 13px;
          color: #7b838a;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 2px 2px 4px #00000016;
      }
      .icon {
        // background-color: red;
        position: relative;
        &::after {
          content: "直达";
          position: absolute;
          right: -55px;
          top: 50%;
          transform: translateY(-50%);
          width: 50px;
          height: 30px;
          border-radius: 5px;
          text-align: center;
          line-height: 30px;
          color: #fff;
          background-color: #000;
          opacity: 0;
          transition: all 0.2s linear;
        }
        &::before {
          content: "";
          position: absolute;
          right: -5px;
          top: 50%;
          width: 11px;
          height: 11px;
          transform: translate(5.5px, -50%) rotate(45deg);
          background-color: #000;
          opacity: 0;
          transition: all 0.2s linear;
        }
        &:hover::after,
        &:hover::before {
          opacity: 1;
        }
      }
    }
  }
  .notLike {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -70%);
    width: 50%;
    height: 80%;
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeQVrHYl5l9Kjdi3PQdhGwt9XEXm71L2YS1Q&s");
    background-size: cover;
    // background-color: red;
  }
}
</style>
